<template>
  <div class="qunliao">
    <toast ref="toast"/>
    <div class="qunliao-item" @click="to_public_chat()">
      <img src="../../assets/img/chat/qunliao.svg" alt="" />
      <div class="name">多人在线</div>
    </div>
    <h3>所有用户({{ userLength-1 }})</h3>
    <div class="users">
      <div
        @click="to_private_chat(item)"
        class="users-item"
        v-for="(item, index) in allUsers"
        v-show="item._id !== _id"
      >
        <img @click.stop="to_uindex(item)" :src="item.avatar" alt="" />
        <div class="name">{{ item.nickname }}</div>
        <div class="new-msg" v-show="item.newmsg">您有新消息</div>
      </div>
    </div>
  </div>
</template>

<script>
import Toast from '../../components/Toast/Toast.vue';
export default {
  name: "",
  components:{
    Toast
  },
  computed: {
    _id() {
     return  (this.$store.getters.user && this.$store.getters.user._id) ||
        (localStorage.getItem("userInfo") &&JSON.parse(localStorage.getItem("userInfo"))._id) ||
          ''
        ;
    },
    allUsers() {
      return this.$store.getters.allUsers;
    },
    userLength() {
      return this.allUsers.length;
    }
  },
  data() {
    return {
      isShow: false
    };
  },
  mounted() {
    //监听新消息
    this.$bus.$on("newmsg", data => {
      let users = document.querySelector(".users");
      // console.log(users);
      this.isShow = true;
    });
  },
  methods: {
    //跳转到多人聊天
    to_public_chat() {
      // console.log(this._id)
      if(!this._id){
        let msg = '登录后可进入聊天'
        let color = 'Orange'
        this.$refs.toast.show(msg,color)
        return 
      }
      let uid = "1";
      this.$router.push("/publicchat/");
    },
    //跳转到用户主页
    to_uindex(item) {
      // console.log(item)
      if(!this._id){
        let msg = '登录后可查看用户'
        let color = 'Orange'
        this.$refs.toast.show(msg,color)
        return 
      }
      let uid = item._id;
      // console.log(uid);
      this.$router.push("/uindex/" + uid);
    },
    //跳转到私聊页面
    to_private_chat(item) {
      if(!this._id){
        let msg = '登录后可进入聊天'
        let color = 'Orange'
        this.$refs.toast.show(msg,color)
        return 
      }
      let uid = item._id;
      let nickname = item.nickname
      this.$router.push("/privatechat/"+uid+'/'+nickname );
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.qunliao {
  margin-top: 44px;
  padding: 0 5px 0 5px;
}
.qunliao-item {
  padding: 10px 0 5px 0;
  display: flex;
  border-bottom: 1px solid #999;
}
.qunliao-item img {
  width: 40px;
  height: 40px;
  border: 0.5px solid #999;
  border-radius: 5px;
}
h3 {
  text-align: center;
}
.users img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.users-item {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid #999;
  display: flex;
  position: relative;
}
.name {
  margin-left: 10px;
}
.new-msg {
  position: absolute;
  right: 0;
  top: 50%;
}
</style>
